<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->
    <van-cell title="头像"
      is-link
      @click="isShowUpdatePhoto = true"
    >
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="userInfo.photo"
      />
    </van-cell>
    <van-cell
      title="用户名"
      :value="userInfo.name"
      is-link
      @click="isShowUpdateName = true"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender === 1 ? '女' : '男'"
      is-link
      @click="isShowUpdateGender = true"
    />
    <van-cell
      title="生日"
      :value="userInfo.birthday || defaultBirthday"
      is-link
      @click="isShowUpdateBirthday = true"
    />

    <!-- 昵称弹层 -->
    <van-popup
      v-model="isShowUpdateName"
      style="height: 100%"
      position="bottom"
    >
      <EditUserName
        :name="userInfo.name"
        @close="isShowUpdateName = false"
        @sure="userInfo.name = $event"
      />
    </van-popup>
    <!-- 昵称弹层 -->

    <!-- 性别弹层 -->
    <van-popup
      v-model="isShowUpdateGender"
      style="height: 100%"
      position="bottom"
    >
      <EditUserGender
        :gender="userInfo.gender"
        @close="isShowUpdateGender = false"
        @sure="userInfo.gender = $event"
      />
    </van-popup>
    <!-- 性别弹层 -->

    <!-- 生日弹层 -->
    <van-popup
      v-model="isShowUpdateBirthday"
      style="height: 100%"
      position="bottom"
    >
      <EditUserBirthday
        :birthday="userInfo.birthday"
        @close="isShowUpdateBirthday = false"
        @sure="userInfo.birthday = $event"
      />
    </van-popup>
    <!-- 生日弹层 -->

    <!-- 头像弹层 -->
    <van-popup
      v-model="isShowUpdatePhoto"
      style="height: 100%"
      position="bottom"
    >
      <EditUserPhoto
        :photo="userInfo.photo"
        @close="isShowUpdatePhoto = false"
        @sure="userInfo.photo = $event"
      />
    </van-popup>
    <!-- 头像弹层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/userInfo.js'
import dayjs from 'dayjs'
import EditUserName from './components/EditUserName.vue'
import EditUserBirthday from './components/EditUserBirthday.vue'
import EditUserGender from './components/EditUserGender.vue'
import EditUserPhoto from './components/EditUserPhoto.vue'
export default {
  name: 'EditUserInfo',
  data () {
    return {
      userInfo: {},
      defaultBirthday: dayjs().format('YYYY-MM-DD'),
      isShowUpdateName: false,
      isShowUpdateGender: false,
      isShowUpdateBirthday: false,
      isShowUpdatePhoto: false
    }
  },
  methods: {
    async getUserInfo () {
      this.$toast.loading('加载中')
      try {
        const { data: res } = await getUserProfile()
        this.userInfo = res.data
        this.$toast.loading({
          duration: 200,
          forbidClick: true,
          message: '成功'
        })
      } catch (error) {
        this.$toast.fail('服务器繁忙，请稍后再试')
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  props: {},
  computed: {},
  watch: {},
  components: { EditUserName, EditUserBirthday, EditUserGender, EditUserPhoto }
}
</script>

<style lang="less" scoped>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
